<template>
<!-- 主页面、首页 -->
  <div class="mod-home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">

          <div class="grid-content bg-purple">
            <span
              icon="el-icon-star-off"
              class="text"
              style="text-align: center; margin: auto"
              >项目介绍：</span>
          </div>


        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card class="box-card">
          <div class="grid-content bg-purple">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-table
                      :data="dataList"
                      border
                      v-loading="dataListLoading"
                      @selection-change="selectionChangeHandle"
                      style="width: 100%;">
                      <el-table-column
                        type="selection"
                        header-align="center"
                        align="center"
                        width="50">
                      </el-table-column>
                      
                      <el-table-column
                        prop="name"
                        header-align="center"
                        align="center"
                        label="标题">
                      </el-table-column>
                      <el-table-column
                        prop="content"
                        header-align="center"
                        align="center"
                        label="公告内容">
                      </el-table-column>
                      <el-table-column
                        prop="state"
                        header-align="center"
                        align="center"
                        label="状态">
                        <template scope="scope">
                          <span v-if="scope.row.state == 0"> 发布</span>
                          <span v-if="scope.row.state == 1"> 下架</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="createTime"
                        header-align="center"
                        align="center"
                        label="创建日期">
                      </el-table-column>
                    </el-table>
                </div>
              </el-col>
              
          </el-row>
          </div>
          </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      map: null,
      point: null,
      marker: null,
      keyword: "",
      local: null,
      dataList:[]
    };
  },
  methods: {
    getInitData(){
      this.$http({
              url: this.$http.adornUrl(`/sys/notice/homeInfo`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataList = data.notices
              }
            })
    }
  },
  mounted(){
    this.getInitData()
    //百度地图渲染
    this.map = new window.BMapGL.Map(this.$refs.map);
    this.point = new window.BMapGL.Point(113.665, 34.784);
    this.map.centerAndZoom(this.point, 15);
    this.map.enableScrollWheelZoom(true);
    //添加一个点
    this.marker = new window.BMapGL.Marker(this.point); // 创建标注
    this.map.addOverlay(this.marker); // 将标注添加到地图中
    this.local = new window.BMapGL.LocalSearch(this.map, {
      renderOptions: { map: this.map },
    });

  },
  watch: {
    keyword: {
      handler() {
        if (this.keyword === "") {
          this.local.clearResults();
          this.map.centerAndZoom(this.point, 15);
        } else {
          this.local.search(this.keyword);
        }
      },
    },
  },

};
</script>

<style>
</style>

